<template>
    <div class="news-container">
        <div class="news-list">
            <h2>News</h2>
            <ul>
                <li v-for="news in newsList" :key="news.id">
                    <!-- 第一种传递 params 参数的方法：直接使用字符串 -->
                    <!-- 当然也包括模板字符串 -->
                    <!-- <RouterLink to="/news/detail/haha/heihei"></RouterLink> -->
                    <RouterLink 
                        :to="{
                            // params 参数 使用对象形式传递时，不能使用 path，只能使用 name
                            // params 参数不能传数组和对象
                            name: 'detail',
                            params: {
                                id: news.id,
                                title: news.title,
                                content: news.content
                            }
                        }"
                        href="#"
                    >{{ news.title }}</RouterLink>
                </li>
            </ul>
        </div>
        <div class="news-content">
            <!-- 这里放置新闻内容 -->
            <RouterView></RouterView>
        </div>
    </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { RouterView, RouterLink } from 'vue-router'

const newsList = reactive([
    { id: '001', title: '西工大风采', content: '无' },
    { id: '002', title: '什么是最好的篮下技术？', content: '翻身跳投' },
    { id: '003', title: '学挖掘机哪家强？', content: '中国山东找蓝翔' },
    { id: '001', title: '西工大风采', content: '无' },
   
]);
</script>

<style scoped>
.news-container {
    display: flex;
    /* min-height: 100%; */
    border: 1px pink solid;
    box-sizing: border-box;
    padding: 5px;
}

.news-list {
    width: 25%;
    /* 左侧占据 25% 的宽度 */
    border: 2px green solid;
    
}
.news-list ul{
    padding-inline-start: 0;
}
.news-list li{
    list-style: none;
}
.news-list a{
    text-decoration: none;
    color: black;
}   
.news-list a.active{
    color: royalblue;
} 
.news-list a:hover{
    color: royalblue;
}

.news-content {
    width: 75%;
    /* 右侧占据 75% 的宽度 */
    min-height: 100%;
    /* background-color: slategrey; */
    box-sizing: border-box;
    border: 1px solid gold;
}
</style>